<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>安心运</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- vendor source -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="js/lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="js/lib/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="js/lib/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="js/lib/bootstrap-table/dist/bootstrap-table.min.css">
    <script src="js/lib/jquery-1.9.1/jquery.min.js"></script>
    <script src="js/lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script src="js/lib/moment/min/moment-with-locales.min.js"></script>
    <script src="js/lib/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
    <script src="js/lib/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script src="js/lib/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="js/lib/layer-v2.2/layer/layer.js"></script>
    <script src="js/lib/mustache/mustache.min.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=ryGGzhrZxutxxgj6q4TPjUGq"></script>
    <!-- thrift source -->
    <script type="text/javascript" src="js/thrift/thrift.js"></script>
    <script type="text/javascript" src="js/thrift/Type_types.js"></script>
    <script type="text/javascript" src="js/thrift/Content_types.js"></script>
    <script type="text/javascript" src="js/thrift/TContentService.js"></script>
    <script type="text/javascript" src="js/thrift/Geo_types.js"></script>
    <script type="text/javascript" src="js/thrift/File_types.js"></script>
    <script type="text/javascript" src="js/thrift/User_types.js"></script>
    <script type="text/javascript" src="js/thrift/TUserService.js"></script>
    <script type="text/javascript" src="js/thrift/User_types.js"></script>
    <script type="text/javascript" src="js/thrift/TUserService.js"></script>
    <script type="text/javascript" src="js/thrift/TruckTrack_types.js"></script>
    <script type="text/javascript" src="js/thrift/TTransportService.js"></script>
    <!-- common service js -->
    <script src="js/main.js"></script>
    <!-- seperate view css source -->
    <link rel="stylesheet" href="css/sysMgt.css">
  </head>
  <body>
    <!-- header -->
    <div class="header clearfix">
      <div class="pull-left header-title">安心运车辆运输监控系统</div>
      <div class="pull-right">
        <div class="btn-top">
          <a href="javascript:;" class="btn btn-success">修改密码</a>
          <a href="javascript:;" class="btn btn-danger">退出</a>
        </div>
      </div>
    </div>

    <!-- navigator -->
    <ul class="nav nav-tabs">
      <li role="presentation"><a href="index.html">实时运输</a></li>
      <li role="presentation"><a href="archive.html">运输档案</a></li>
      <li role="presentation"><a href="sysMgt.html">系统管理</a></li>
    </ul>

    <!-- main content -->
    <div class="main mgt-content">
      <ul class="nav nav-pills nav-stacked" role="tablist">
        <li role="presentation" class="active">
          <a href="#truck" role="tab" data-toggle="tab">车辆管理</a>
        </li>
        <li role="presentation">
          <a href="#driver" role="tab" data-toggle="tab">驾驶员管理</a>
        </li>
        <li role="presentation">
          <a href="#location" role="tab" data-toggle="tab">收发位置管理</a>
        </li>
      </ul>
      <div class="right-main">
        <div class="tab-content">
          <!-- 车辆管理panel -->
          <div role="tabpanel" class="tab-pane active" id="truck">
            <div class="form-section">
              <form class="form-inline">
                <div class="form-group form-group-sm">
                  <label for="license">车牌号：</label>
                  <input type="text" name="license" class="form-control" id="license">
                </div>
                <button type="button" id="query_trucks_btn" class="btn btn-sm btn-success btn-center">查询</button>
              </form>
            </div>
            <div class="table-section">
              <button class="btn btn-sm btn-success btn-right" data-toggle="modal" data-target="#addTruckModal">新增车辆</button>
              <table id="trucks-table" class="table table-striped">
                <thead>
                  <tr>
                    <th data-field="licNumber">车牌号</th>
                    <th data-field="no">设备id</th>
                    <th data-field="drivers" data-formatter="sysMgtCtrl.methods.driverNameFormatter">驾驶员</th>
                    <th data-field="auditStat.createAt" data-formatter="js_date_time">创建时间</th>
                    <th data-field="auditStat.createBy.name">创建人</th>
                    <th data-formatter="sysMgtCtrl.methods.truckOperationFormatter"
                      data-events="getBindDriverModal4table">操作</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
          <!-- 驾驶员管理panel -->
          <div role="tabpanel" class="tab-pane" id="driver">
            <div class="form-section">
              <form class="form-inline">
                <div class="form-group form-group-sm">
                  <label for="driver_name">姓名：</label>
                  <input type="text" class="form-control" name="driver_name" id="driver_name">
                </div>
                <button type="button" id="query_drivers_btn" class="btn btn-sm btn-success btn-center">查询</button>
              </form>
            </div>
            <div class="table-section">
              <button type="submit" class="btn btn-sm btn-success btn-right" data-toggle="modal" data-target="#addDriverModal">新增驾驶员</button>
              <table id="drivers-table" class="table table-striped">
                <thead>
                  <tr>
                    <th data-field="name">姓名</th>
                    <th data-field="mobile">手机</th>
                    <th data-field="auditStat.createAt" data-formatter="js_date_time">创建时间</th>
                    <th data-field="auditStat.createBy.name">创建人</th>
                    <th data-formatter="sysMgtCtrl.methods.driverOperationFormatter">操作</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
          <!-- 收发货位置管理panel -->
          <div role="tabpanel" class="tab-pane" id="location">
            <div class="form-section">
              <form class="form-inline">
                <div class="form-group form-group-sm">
                  <label for="address_name">地点名称：</label>
                  <input type="text" class="form-control" name="name" id="address_name">
                </div>
                <div class="form-group form-group-sm">
                  <label for="exampleInputName2">类型：</label>
                  <select class="form-control" name="addressType" id="address_type">
                    <option value=""></option>
                    <option value="0">发货地点</option>
                    <option value="1">收货地点</option>
                  </select>
                </div>
                <button type="button" id="query_address_btn" class="btn btn-sm btn-success btn-center">查询</button>
              </form>
            </div>
            <div class="table-section">
              <button type="submit" class="btn btn-sm btn-success btn-right"  data-toggle="modal" data-target="#addLocationModal">新增收发位置</button>
              <table id="locations-table" class="table table-striped">
                <thead>
                  <tr>
                    <th data-field="name">地点名称</th>
                    <th data-formatter="sysMgtCtrl.methods.locationTypeFormatter">类型</th>
                    <th data-field="point.lng">经度</th>
                    <th data-field="point.lat">纬度</th>
                    <th data-field="remark">备注</th>
                    <th data-field="auditStat.createAt" data-formatter="js_date_time">创建时间</th>
                    <th data-field="auditStat.createBy.name">创建人</th>
                    <th data-formatter="sysMgtCtrl.methods.locationOperationFormatter">操作</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 关联驾驶员modal -->
    <div class="modal fade" id="bindDriverModal" tabindex="-1" role="dialog" aria-labelledby="bindDriverModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">
              关联驾驶员
            </h4>
          </div>
          <div class="modal-body">
            <form id="bind_driver_form">
              <div class="form-group">
                <label for="inputPassword3">车牌号</label>
                <p id="bind_driver_license" class="form-control-static"></p>
              </div>
              <div class="form-group drivers"></div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">关闭</button>
            <button type="button" id="btn-bind-driver" class="btn btn-sm btn-primary">
              提交
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- bind driver modal body template -->
    <script id="driver_checkbox_tpl" type="text/template">
      <label for="inputPassword3">驾驶员</label>
      <div class="form-control-static">
        {{#data}}
        <label class="checkbox-inline">
          <input type="checkbox" id="driver_{{id}}" value="{{id}}" {{#checked}}checked="checked"{{/checked}}> {{name}}
        </label>
        {{/data}}
      </div>
    </script>

    <!-- 新增车辆modal -->
    <div class="modal fade" id="addTruckModal" tabindex="-1" role="dialog" aria-labelledby="addTruckModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">
              新增车辆
            </h4>
          </div>
          <div class="modal-body">
            <form id="save-truck">
              <div class="form-group">
                <label for="licNumber">车牌号</label>
                <input type="text" class="form-control" name="licNumber" id="licNumber" placeholder="">
              </div>
              <div class="form-group">
                <label for="no">设备id</label>
                <input type="text" class="form-control" name="no" id="no" placeholder="">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">关闭</button>
            <button type="button" id="save-truck-btn" class="btn btn-sm btn-primary">
              提交
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增驾驶员modal -->
    <div class="modal fade" id="addDriverModal" tabindex="-1" role="dialog" aria-labelledby="addDriverkModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">
              新增驾驶员
            </h4>
          </div>
          <div class="modal-body">
            <form id="add_driver_form">
              <div class="form-group">
                <label for="add_driver_form_name">姓名</label>
                <input type="text" name="name" id='add_driver_form_name'class="form-control">
              </div>
              <div class="form-group">
                <label for="add_driver_form_mobile">手机号码</label>
                <input type="text" class="form-control" name="mobile" id="add_driver_form_mobile">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">关闭</button>
            <button type="button" id="add_driver_btn" class="btn btn-sm btn-primary">
              提交
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增收发货位置modal -->
    <div class="modal fade" id="addLocationModal" tabindex="-1" role="dialog" aria-labelledby="addLocationModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">
              新增收发货地点
            </h4>
          </div>
          <div class="modal-body">
            <form id="add_location_form">
              <div class="form-group">
                <label for="add_location_form_name">地点名称</label>
                <input type="text" class="form-control" name="name" id="add_location_form_name">
              </div>
              <div class="form-group">
                <label for="add_location_form_type">类型</label>
                <select name="type" id="add_location_form_type" class="form-control">
                  <option value="0">发货地点</option>
                  <option value="1">收货地点</option>
                </select>
              </div>
              <div class="form-group">
                <label for="add_location_form_lat">经度</label>
                <input type="text" name="lat" class="form-control" id="add_location_form_lat" placeholder="">
              </div>
              <div class="form-group">
                <label for="add_location_form_lng">纬度</label>
                <input type="text" name="lng" class="form-control" id="add_location_form_lng" placeholder="">
              </div>
              <div class="form-group">
                <label for="add_location_form_remark">备注</label>
                <textarea name="remark" id="add_location_form_remark" class="form-control" rows="5"></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">关闭</button>
            <button type="button" id="add_location_btn" class="btn btn-sm btn-primary">
              提交
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- confirm modal -->
    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">删除</h4>
          </div>
          <div class="modal-body">
            <p>确认删除吗?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" id="btn-confirm" class="btn btn-primary">确定</button>
          </div>
        </div>
      </div>
    </div>
    <script>
      var _this = null;
      var sysMgtCtrl = _this = {
        initViewMethods: {
          initDatetimePicker: function() {
            $('.datetimepicker').datetimepicker({
              locale: 'zh-cn',
              format: 'YYYY-MM-DD'
            });
          },
          initTrucksTable: function() {
            _this.methods.initTrucksTable();
          },
          initDriversTable: function() {
            _this.methods.initDriversTable();
          },
          initLocationsTable: function() {
            _this.methods.initLocationsTable();
          }
        },
        initEventHandlers: {
          bindSaveTruckHandler: function() {
            $('#save-truck-btn').click(sysMgtCtrl.methods.saveTruck);
          },
          queryTrucksBtnHandler: function() {
            $('#query_trucks_btn').click(function() {
              _this.methods.initTrucksTable();
            })
          },
          queryDriversBtnHandler: function() {
            $('#query_drivers_btn').click(function() {
              _this.methods.initDriversTable();
            });
          },
          queryAddressBtnHandler: function() {
            $('#query_address_btn').click(function() {
              _this.methods.initLocationsTable();
            });
          },
          addDriverBtnHandler: function() {
            $('#add_driver_btn').click(function() {
              var queryData = $('#add_driver_form').serializeObject();
              client.saveDriver(new TruckTrack.TDriver(queryData), function(res) {
                if (res.id) {
                  layer.msg('新增成功');
                  $('#addDriverModal').modal('hide');
                  _this.methods.initDriversTable();
                }
              });
            })
          },
          addLocationBtnHandler: function() {
            $('#add_location_btn').click(function() {
              var queryData = $('#add_location_form').serializeObject();
              queryData.type = +queryData.type;
              queryData.point = {
                lat: queryData.lat,
                lng: queryData.lng
              }
              client.saveAddress(new TruckTrack.TAddress(queryData), function(res) {
                if (res.id) {
                  layer.msg('新增成功');
                  $('#addLocationModal').modal('hide');
                  _this.methods.initLocationsTable();
                }
              });
            });
          }
        },
        methods: {
          initTrucksTable: function() {
            var license = $('#license').val();
            var $table = $('#trucks-table'),
                queryData = {
                  licNumber: license ? license : ''
                };
            $table.bootstrapTable('destroy');
            client.queryTruck(new TruckTrack.TTruckQuery(queryData), function (res) {
              console.log(res);
              $table.bootstrapTable({
                data: res.items,
                pagination: true,
                pageSize: 10
              });
            });
          },
          initDriversTable: function() {
            var driverName = $('#driver_name').val();
            $('#drivers-table').bootstrapTable('destroy');
            var queryData = {
              name: driverName ? driverName : ''
            };
            client.queryDriverPage(new TruckTrack.TDriverQuery(queryData), function(res) {
              console.log(res)
              drivers = res.items;
              var $table = $('#drivers-table');
              $table.bootstrapTable({
                data: res.items,
                pagination: true,
                pageSize: 10
              });
            });
          },
          initLocationsTable: function() {
            var addressName = $('#address_name').val();
            var addressType = $('#address_type').val();
            $('#locations-table').bootstrapTable('destroy');
            var queryData = {
              name: addressName ? addressName : ''
            };
            if (addressType) {
              queryData.addressType = +addressType;
            }
            client.queryAddress(new TruckTrack.TAddressQuery(queryData), function(res) {
              console.log(res)
              var $table = $('#locations-table');
              $table.bootstrapTable({
                data: res.items,
                pagination: true,
                pageSize: 10
              });
            })
          },
          saveTruck: function() {
            var $form = $('#save-truck'),
                queryData = $form.serializeObject();
            client.saveTruck(new TruckTrack.TTruck(queryData), function(res) {
              console.log(res);
              if (res.id) {
                layer.msg('新增成功');
                $('#addTruckModal').modal('hide');
              }
            });
          },
          driverNameFormatter: function(val, row, index) {
            if (!val instanceof Array) {
              return null;
            }
            var resStr = '';
            for (var i=0, l=val.length; i<l; i++) {
              var selDriverItem = val[i];
              resStr += selDriverItem.name;
              if (i != l -1 ) {
                resStr += ' ';
              }
            }
            return resStr;
          },
          truckOperationFormatter: function(val, row, index) {
            var id = row.id;
            // '<a class="operation pointer bind btn btn-info">关联驾驶员</a>'
            return '<a class="operation pointer del btn btn-danger" onclick="sysMgtCtrl.methods.deleteTruck(' + id + ')">删除</a>';
          },
          driverOperationFormatter: function(val, row, index) {
            var id = row.id;
            return '<a class="operation pointer del btn btn-danger" onclick="sysMgtCtrl.methods.deleteDriver(' + id + ')">删除</a>';
          },
          locationTypeFormatter: function(val, row) {
            return row.type == 0 ? '发货地' : '收货地';
          },
          locationOperationFormatter: function(val, row, index) {
            var id = row.id;
            return '<a class="operation pointer del btn btn-danger" onclick="sysMgtCtrl.methods.deleteLocation(' + id + ')">删除</a>';
          },
          getConfirmModal: function(callback, id) {
            var $confirmModal = $('#confirmModal');
            $confirmModal.modal();
            $('#btn-confirm').click(function() {
              if (callback) callback(id);
              $confirmModal.modal('hide');
            });
          },
          getBindDriverModal: function(e, value, row, index) {
            var $bindDriverModal = $('#bindDriverModal');
            $bindDriverModal.find('#bind_driver_license').text(row.licNumber);
            var checkedDrivers = row.drivers ? row.drivers : [];

            if (!window.driversBindVM) {
              driversBindVM = {};
            }
            if(!driversBindVM[row.id]) {
              var res = getDriverViewModel(drivers, checkedDrivers);
              driversBindVM[row.id] = res;
            }
            console.log(drivers)
            var tplHtmlStr = $('#driver_checkbox_tpl').html();
            var container = $('#bind_driver_form .drivers');
            var resHtmlStr = Mustache.render(tplHtmlStr, {
              data: driversBindVM[row.id]
            });
            container.empty().append(resHtmlStr)
            $bindDriverModal.modal();
            $('#btn-bind-driver').click(function() {
              layer.msg('绑定成功');
              $bindDriverModal.modal('hide');
            });

            function getDriverViewModel(sourceDrivers, checkedDrivers) {
              for (var i=0, l=sourceDrivers.length; i<l; i++) {
                var sourceDriver = sourceDrivers[i], flag = false;
                for(var k=0, ll=checkedDrivers.length; k<ll; k++) {
                  var checkedDriver = checkedDrivers[k];
                  if (sourceDriver.id == checkedDriver.id) {
                    // sourceDriver.checked = true;
                    flag = true;
                    break;
                  }
                }
                sourceDriver.checked = flag ? true : false;
              }
              return sourceDrivers;
            }
          },
          deleteTruck: function(id) {
            this.getConfirmModal(delCallback, id);
            function delCallback() {
              client.removeTruck(id, function(res) {
                console.log(res);
                layer.msg('删除成功');
                $('#trucks-table').bootstrapTable('remove', {
                  field: 'id',
                  values: [id]
                });
              })
            }
          },
          deleteDriver: function(id) {
            this.getConfirmModal(delCallback, id);
            function delCallback() {
              client.removeDriver(id, function(res) {
                console.log(res);
                layer.msg('删除成功');
                $('#drivers-table').bootstrapTable('remove', {
                  field: 'id',
                  values: [id]
                });
              })
            }
          },
          deleteLocation: function(id) {
            this.getConfirmModal(delCallback, id);
            function delCallback() {
              client.removeAddress(id, function(res) {
                console.log(res);
                layer.msg('删除成功');
                $('#locations-table').bootstrapTable('remove', {
                  field: 'id',
                  values: [id]
                });
              })
            }
          }
        },
        bootstrap: function() {
          var initViewMethods = this.initViewMethods;
          var initEventHandlers = this.initEventHandlers;
          for (var key in initViewMethods) {
            initViewMethods[key]();
          }
          for (var key in initEventHandlers) {
            initEventHandlers[key]();
          }
        }
      }

      var getBindDriverModal4table = {
        'click .bind': sysMgtCtrl.methods.getBindDriverModal
      }

      $(function() {
        sysMgtCtrl.bootstrap();
      });
    </script>
  </body>
</html>
